/* eslint  react/no-string-refs: 0 */
import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Input, Grid, Form, Select } from '@alifd/next';
import { observer, inject } from 'mobx-react';
import './EditForm.scss';
import { ApiOfExpressionCreate, ApiOfExpressionUpdate } from '#/utils/policyApiDefine'

const { Row, Col } = Grid;
const FormItem = Form.Item;

const formItemLayout = {
  labelCol: { xxs: 6, s: 3, l: 4 },
  wrapperCol: { s: 12, l: 12 }
};

@inject('dictstore')
@observer
export default class SettingsForm extends Component {
  static displayName = 'EditForm';
  static propTypes = {};
  static defaultProps = {};

  constructor(props) {
    super(props);
    let formData = { ...this.props.formData };
    this.state = {
      value: {
        id: formData.id,
        type: formData.type,
        expressionInfo: formData.expressionInfo,
        linkSymbol: formData.linkSymbol,
        sequence: formData.sequence,
        extendProperty: formData.extendProperty
      },
    };
  }

  formChange = (value) => {
    this.setState({
      value,
    });
  };

  validateAllFormField = (values, errors) => {
    let that = this;
    if (!errors) {
      let updated = values.id !== undefined;
      if (updated) {
        ApiOfExpressionUpdate(values.id, values).then(() => that.props.submitCallback('success'))
      } else {
        ApiOfExpressionCreate(values).then(() => that.props.submitCallback('success'))
      }
    } else {
      // 处理表单报错
    }
  };

  render() {
    return (
      <div className="settings-form">
        <IceContainer>
          <Form
            value={this.state.value}
            onChange={this.formChange}
            ref="form"
          >
            <div style={styles.formContent}>
              <Input name="id" htmlType="hidden" />
              <FormItem size="medium" label="表达式：" {...formItemLayout} required requiredMessage="必填">
                <Input.TextArea name="expressionInfo" placeholder="{... ...}" />
              </FormItem>
              <FormItem size="medium" label="表达式类型：" {...formItemLayout} required requiredMessage="必填">
                <Select name="type" dataSource={this.props.dictstore.PolicyExpTypeDS} hasClear={true} style={{ width: '100%' }} />
              </FormItem>
              <FormItem size="medium" label="连接符：" {...formItemLayout} >
                <Input.TextArea name="linkSymbol" placeholder="连接符" />
              </FormItem>
              <FormItem size="medium" label="排序符：" {...formItemLayout} >
                <Input.TextArea name="sequence" placeholder="排序符" />
              </FormItem>
              <FormItem size="medium" label="拓展属性" {...formItemLayout} >
                <Input.TextArea name="extendProperty" placeholder="{... ...}" />
              </FormItem>
              <Row style={{ marginTop: 20 }}>
                <Col offset="3">
                  <Form.Submit
                    size="medium"
                    type="primary"
                    style={{ width: 100 }}
                    validate
                    onClick={this.validateAllFormField}
                  >
                    保 存
              </Form.Submit>
                </Col>
              </Row>
            </div>
          </Form>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  label: {
    textAlign: 'right',
  },
  formContent: {
    width: '100%',
    position: 'relative',
  },
  formItem: {
    alignItems: 'center',
    marginBottom: 25,
  },
  formTitle: {
    margin: '0 0 20px',
    paddingBottom: '10px',
    borderBottom: '1px solid #eee',
  },
};
